<template>
	<view class="main">
		<view class="avatar-box">
			<image class="avatar" src="@/static/images/img3.png" mode=""></image>
			<view class="txt-box">更换头像</view>
		</view>
		<view class="list">
			<view class="item">
				<view class="item-l">昵称</view>
				<input type="text" class="item-r" placeholder="请输入您的昵称" v-model.trim="nickName" />
				<image class="allow" src="@/static/images/allow-right.png" mode=""></image>
			</view>
			<view class="item">
				<view class="item-l">性别</view>
				<view class="sex-box">
					<view :class="['sex', item.state ? 'on' : '' ]" v-for="item in sexArr" :key="item.id" @click="handleSex(item.id)" >
						<image class="img" :src="item.url" mode=""></image>
						<text class="txt">{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-l">绑定手机号</view>
				<input type="text" disabled class="item-r" v-model.trim="phone" />
			</view>
		</view>
	</view>
	
	<view class="btn">保存</view>
</template>

<script setup>
	import { ref } from 'vue'
	let nickName = ref("饭饭")
	let phone = ref("158****5927")
	let sexArr = ref([
		{
			id: 1,
			state: false,
			url: "../../static/images/man.png",
			name: "男"
		},
		{
			id: 2,
			state: false,
			url: "../../static/images/woman.png",
			name: "女"
		}
	])
	let handleSex = (id) => {
		sexArr.value.forEach((item)=> {
			if(item.id == id){
				item.state = true
			}else{
				item.state = false
			}
		})
	}
</script>

<style lang="scss">
.main{
	background: #fff;
	border-radius: 20rpx;
	width: 670rpx;
	margin: 50rpx auto;
	padding-top: 120rpx;
	padding-bottom: 80rpx;
	
	.avatar-box{
		position: relative;
		width: 120rpx;
		height: 120rpx;
		margin: 0 auto;
		overflow: hidden;
		
		.avatar{
			width: 120rpx;
			height: 120rpx;
			border-radius: 120px;
		}
		.txt-box{
			font-size: 18rpx;
			color: #333;
			position: absolute;
			left: 0;
			bottom: 0;
			height: 44rpx;
			width: 100%;
			background: rgba(255, 255, 255, .6);
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.list{
		margin-top: 80rpx;
		padding: 0 70rpx;
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #e1e1e1;
			padding-bottom: 30rpx;
			margin-bottom: 30rpx;
			.item-l{
				font-size: 28rpx;
				color: #333;
			}
			.item-r{
				font-size: 28rpx;
				color: #888;
				margin-left: auto;
				margin-right: 16rpx;
				text-align: right;
			}
			.allow{
				width: 11rpx;
				height: 21rpx;
			}
			
			.sex-box{
				display: flex;
				align-items: center;
				
				.sex{
					display: flex;
					align-items: center;
					justify-content: center;
					background: #f6f6f6;
					padding: 12rpx 20rpx;
					margin-left: 20rpx;
					border-radius: 20px;
					
					&.on:nth-of-type(1){
						background: #aae9f2;
					}
					&.on:nth-of-type(2){
						background: #fce1e1;
					}
					
					
					.img{
						width: 21rpx;
						height: 21rpx;
					}
					.txt{
						font-size: 24rpx;
						color: #333;
						margin-left: 10rpx;
					}
				}
			}
		}
	}
}
.btn{
	width: 84%;
	height: 90rpx;
	border-radius: 90px;
	background: #aae9f2;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #333;
	margin: 0 auto;
	font-weight: 500;
}
</style>
